<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.3/demo/demo.css">
    <script type="text/javascript" src="jquery-easyui-1.5.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north'" style="height:50px"></div>
    <div data-options="region:'south',split:true" style="height:50px;"></div>
    <div data-options="region:'west',split:true" title="导航菜单" style="width:200px;">
        <!--左边列表-->
        <div class="easyui-accordion" style="width:500px;height:300px;" data-options="fit:true">
            <div title="快捷菜单" data-options="iconCls:''" style="overflow:auto;padding:10px;">
                <ul class="easyui-tree wu-side-tree">
                    <li>
                        <a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="./jquery-easyui-1.5.3/demo/layout/temp/layout-1.html" iframe="1"><span>用户管理</span></a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" data-icon="icon-users" data-link="./jquery-easyui-1.5.3/demo/layout/temp/layout-2.html" iframe="1"><span>分类管理</span></a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" data-icon="icon-user-group" data-link="./jquery-easyui-1.5.3/demo/layout/temp/layout-3.html" iframe="1"><span>新闻管理</span></a>
                    </li>
                </ul>
            </div>
            <div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">

            </div>
            <div title="TreeMenu" data-options="iconCls:'icon-search'" style="padding:10px;">
                <ul class="easyui-tree">
                    <li>
                        <span>Foods</span>
                        <ul>
                            <li>
                                <span>Fruits</span>
                                <ul>
                                    <li>apple</li>
                                    <li>orange</li>
                                </ul>
                            </li>
                            <li>
                                <span>Vegetables</span>
                                <ul>
                                    <li>tomato</li>
                                    <li>carrot</li>
                                    <li>cabbage</li>
                                    <li>potato</li>
                                    <li>lettuce</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

    </div>
    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
        <div id="wu-tabs" class="easyui-tabs" data-options="border:false,fit:true">
            <div title="首页" data-options="href:'./jquery-easyui-1.5.3/demo/layout/temp/layout-home.html',closable:false,iconCls:'icon-tip',cls:'pd3'"></div>
        </div>

    </div>
</div>
<script type="text/javascript">
	$(function(){
		$('.wu-side-tree a').bind("click",function(){
			var title = $(this).text();
			var url = $(this).attr('data-link');
			var iconCls = $(this).attr('data-icon');
			var iframe = $(this).attr('iframe')==1?true:false;
			addTab(title,url,iconCls,iframe);
		});
	})
    //iframe:1用iframe模式：0用div模式
	function addTab(title,href,iconCls,iframe) {
		var tabPane1 = $('#wu-tabs');
		console.log(tabPane1);
		if(!tabPane1.tabs('exists',title)){
			var content = '<iframe scrolling ="auto" frameborder="0" src="'+href+'"style="width:100%;height:100%;"></iframe>';
			if(iframe){//iframe模式
				tabPane1.tabs('add',{
					title:title,
					content:content,
					iconCls:iconCls,
					fit:true,
					cls:'pd3',
					closable:true
				});
			}else{
				tabPane1.tabs('add', {
					title: title,
					href: href,
					iconCls: iconCls,
					fit: true,
					cls: 'pd3',
					closable: true
				});
			}
		}else{//div模式
			tabPane1.tabs('select',title)
		}
	}



</script>
</body>
</html>